<template>
  <div class="article-list" ref="articleList" @scroll="rememberScroll">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <!-- 列表组件，上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-item v-for="(item, index) in articles" :key="index"  :article="item"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import ArticleItem from './article-item.vue'
// 获取所有频道列表
import { getArticlesChannel } from '@/api/article'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isLoading: false, // 下拉刷新状态
      // 加载状态
      loading: false,
      // 是否全部数据加载完成
      finished: false,
      // 文章列表
      articles: [],
      // 时间戳
      timestamp: Date.now(),
      // 阅读位置卷曲的高度
      scrollTop: 0
    }
  },
  // 阅读位置的记录
  // 1.需要监听article-list滚顶事件
  // 2.通过一个数据记录卷曲的高度
  // 3.当组件激活的时候拿数据还原滚顶位置
  activated () {
    // 还原之前滚动的位置
    // 隐藏bug 当前dom 是dispaly：none 隐藏的时候操作滚动位置是无效
    // tab加上adimated 事滑动的切换，所有容器事显示的
    this.$refs.articleList.scrollTop = this.scrollTop
  },
  methods: {
    // 滚顶监听
    rememberScroll () {
      // 监听滚动
      // const scrollTop = this.$refs.articleList.scrollTop
      // console.log(scrollTop)
      // 记录卷曲的高度记录阅读的位置
      this.scrollTop = this.$refs.articleList.scrollTop
    },
    // 下拉刷新
    async onRefresh () {
      // // 模拟获取数据
      // setTimeout(() => {
      //   // 刷新完毕
      //   this.isLoading = false
      //   // 设置数据全部加载完毕未，未加载完
      //   this.finished = false
      //   // 设置数据，替换
      //   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      //   this.articles = data
      // }, 1000)

      // 1. 调接口api 回到时间戳第一页
      // 2. 刷新结束
      // 3. 给文章列表加载数据
      // 4. 全部数据加载结束
      // 5. 数据赋值给时间戳，记录时间戳，为上拉加载准备
      this.timestamp = Date.now()
      const [, res] = await getArticlesChannel(this.channelId, this.timestamp)
      this.isLoading = false
      this.articles = res.data.data.results
      this.finished = false
      this.timestamp = res.data.data.pre_timestamp
    },
    // 上拉加载触发事件
    async onLoad () {
      // 模拟数据获取数据
      // setTimeout(() => {
      //   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      //   // 添加数据有数据
      //   this.articles.push(...data)
      //   if (this.articles.length > 50) {
      //     // 超过多少条数据就加载完毕
      //     this.finished = true
      //   }
      //   // 结束加载状态
      //   this.loading = false
      // }, 1000)

      // 1.调用获取文章列表的API函数
      // 2.关闭加载状态
      // 3.判断是否有数据吗
      // 4.如果还有：给article追加数据，记录返回的时间戳作为下一次请求时间戳
      // 5.如果没有：加载完毕改状态

      const [, res] = await getArticlesChannel(this.channelId, this.timestamp)
      this.loading = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      } else {
        this.timestamp = res.data.data.pre_timestamp
      }
      this.articles.push(...res.data.data.results)
    }
  }
}
</script>
<style scoped lang="less">
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px;
}
</style>
